<template>
  <div>
    <Table highlight-row :loading="loading" :columns="columns" :data="dataPage">
      <template slot="gender" slot-scope="{ row }">
        <span v-if="row.gender === 0">男</span>
        <span v-else-if="row.gender === 1">女</span>
        <span v-else>未知</span>
      </template>
      <!-- <template slot="status" slot-scope="{row}">
                <Tag v-if="row.status === 0">正常</Tag>
                <Tag v-if="row.status === 1" color="primary">停用</Tag>
            </template> -->
      <template slot="online" slot-scope="{ row }">
        <Badge v-if="row.online === 0" status="success" text="在线" />
        <Badge v-else status="default" text="离线" />
      </template>
      <template slot="status" slot-scope="{ row }">
        <Badge v-if="row.status === 0" status="success" text="正常" />
        <Badge v-if="row.status === 1" status="error" text="停用" />
      </template>
      <template slot="operation" slot-scope="{ row }">
        <a
          v-hasC="{
            name: 'setting-phone-phone-update',
            flag: 'v1/setting/phone/phone-update',
          }"
          @click="handleEdit"
          >{{ row.operation }}</a
        >
      </template>
    </Table>
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="limiData.length"
        :current.sync="current"
        show-elevator
        show-sizer
        show-tota
      />
    </div>
    <Modal v-model="modalEdit" title="编辑">
      <Form :label-width="100">
        <FormItem label="设备ID" required>
          <Input placeholder="请输入设备ID" />
        </FormItem>
        <FormItem label="授权码" required>
          <Input placeholder="请输入授权码" />
        </FormItem>
        <FormItem label="品牌">
          <Input placeholder="请输入手机品牌" />
        </FormItem>
        <FormItem label="型号">
          <Input placeholder="请输入手机型号" />
        </FormItem>
        <!-- <FormItem label="项目" required>
                    <Select clearable placeholder="请选择项目">
                        <Option v-for="item in projectList" :value="item.value" :key="item.value">{{item.label}}</Option>
                    </Select>
                </FormItem>-->
        <FormItem label="人员" required>
          <Select clearable placeholder="请选择人员">
            <Option
              v-for="item in personList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="备注">
          <Input placeholder="请输入设备备注" />
        </FormItem>
        <FormItem label="状态：">
          <Switch />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      current: 1,
      size: 10,
      modalEdit: false,
      projectList: [
        {
          value: "南通",
          label: "南通",
        },
        {
          value: "华研",
          label: "华研",
        },
        {
          value: "北大",
          label: "北大",
        },
      ],
      personList: [
        {
          value: "高玲",
          label: "高玲",
        },
        {
          value: "王艳",
          label: "王艳",
        },
        {
          value: "刘强",
          label: "刘强",
        },
      ],
      columns: [
        { title: "设备ID", key: "ID", minWidth: 158, fixed: "left" },
        { title: "绑定微信号", key: "wechat", width: 118 },
        { title: "品牌", key: "brand", width: 90 },
        { title: "型号", key: "model", minWidth: 90 },
        { title: "归属人", key: "person", width: 100 },
        { title: "更新时间", key: "updateTime", width: 150 },
        { title: "备注", key: "remarks", minWidth: 100 },
        { title: "操作", slot: "operation", fixed: "right", width: 80 },
      ],
      list: [],
    };
  },
  computed: {
    limiData() {
      let data = [...this.list];
      return data;
    },
    dataPage() {
      const data = this.limiData;
      const start = this.current * this.size - this.size;
      const end = start + this.size;
      return [...data].slice(start, end);
    },
  },
  methods: {
    mockData() {
      const item = {
        ID: "863348045436564",
        wechat: "lbxx7710",
        brand: "小米",
        model: "红米7",
        project: "北大",
        person: "高玲",
        updateTime: "2020-07-06 17:03",
        remarks: "测试机",
        status: Math.floor(Math.random(0) * 2),
        operation: "编辑",
      };
      return item;
    },
    getData() {
      this.loading = true;
      setTimeout(() => {
        let data = [];
        for (let i = 1; i < 100; i++) {
          data.push(this.mockData());
        }
        this.list = data;
        this.loading = false;
      }, 500);
    },
    handleEdit() {
      this.modalEdit = true;
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style scoped></style>
